<template>
  <basic-container>
    <el-dialog title="任务审批" :visible.sync="dialog"
               @close="cancelDialog()" width="80vw" top="5vh">
      <el-alert title="审批信息" type="info" :closable="false"/>
      <div style="margin-top: 10px">
        <ul class="process-image-box">
          <li v-for="(item, i) in auditProcessList" :key="item.id" :class="item.complete | flowCompleteCls">
            <i class="line" v-if="i !== 0"></i>
            <div class="processContent">
              <div class="quadrilateral" :style="{'padding-top': item.typeName ? '15px' : '0'}">
                <div class="min-title" v-if="item.typeName">{{ item.typeName }}</div>
                <div class="min-title min-title-current" v-if="item.complete === 2">当前</div>
                <div v-for="col in item.users" :key="col.realName">
                  <span>{{ col.realName || '--' }}</span>
                  <i class="el-icon-success processSuccess" v-if="col.status === 3"></i>
                  <i class="el-icon-circle-close processFail" v-if="col.status === 2"></i>
                </div>
              </div>
              <div class="quadrilateral-tips" v-if="item.flowName">{{item.flowName}}</div>
            </div>
          </li>
        </ul>
      </div>
      <el-descriptions class="margin-top" :column="2" border style="margin-bottom: 10px">
        <el-descriptions-item>
          <template slot="label">
            任务名称
          </template>
          {{form.name}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            审批日志
          </template>
          <el-button type="text" size="small" icon="el-icon-view" @click="showTaskAuditLogDialog(form.processId)">审批日志</el-button>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            申请人
          </template>
          {{form.userName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            申请时间
          </template>
          {{form.createTime}}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.endTime">
          <template slot="label">
            审批时间
          </template>
          {{form.endTime}}
        </el-descriptions-item>
        <el-descriptions-item v-if="form.startTime">
          <template slot="label">
            接收时间
          </template>
          {{form.startTime}}
        </el-descriptions-item>
      </el-descriptions>
      <el-alert title="审批内容" type="info" :closable="false"/>
      <el-row v-loading="loading" v-if="!handleException">
        <component :is="auditView" :id="form.fkId" :isAudit=true @data-loaded="handleDataLoaded"></component>
      </el-row>
      <div class="centered-content" v-if="handleException">
        <el-row :gutter="20" type="flex" justify="center" align="middle">
          <el-col :span="24">
            <div class="centered-text">
              系统未知错误,请反馈给管理员
            </div>
          </el-col>
        </el-row>
      </div>
      <el-alert title="审批操作" type="info" :closable="false" v-if="!isView"/>
      <el-form ref="auditForm" :model="form" label-width="90px">
        <div style="margin-top:10px" v-if="!isView">
          <el-form-item label="审批意见" prop="comment">
            <el-input type="textarea" :rows="4" v-model="form.comment" placeholder="请输入审批意见"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelDialog" size="small" icon="el-icon-close">关闭</el-button>
        <el-button v-if="!isView" type="primary" @click="completeTask" size="small" icon="el-icon-check" :loading="loading">审批</el-button>
        <el-button v-if="!isView" type="danger" @click="rejectTask" size="small" icon="el-icon-back" :loading="loading">驳回</el-button>
      </span>
    </el-dialog>

    <TaskAuditLogDialog :dialog="taskAuditLogDialog" :process-id="processId" @closeDialog="closeTaskAuditTaskLogDialog"/>
  </basic-container>
</template>
<script>
import {completeTask, fetchDetail, fetchDetailByProcessId, listProcessTasks, rejectTask} from "@/api/act/task";
import TaskAuditLogDialog from "@/components/act/TaskAuditLogDialog";

export default {
  name: 'task-audit',
  components: {
    TaskAuditLogDialog
  },
  // props: {
  //   dialog: Boolean,
  // },
  data() {
    return {
      isView: false,
      form: {},
      relateData: {},
      activitiAuditLogs: [], // 审批日志

      auditProcessList: [],

      auditView: '',

      taskAuditLogDialog: false,
      processId: '',
      loading: false,
      handleException: false,
      dialog: false,
    }
  },
  created() {
  },
  methods: {
    initData(params) {
      this.isView = params.isView;
      this.form = {};
      this.auditProcessList = [];
      this.loading = true
      if(params.taskId) {
        fetchDetail(params.taskId).then((res) => {
          this.form = res.data.data;
          this.auditView = this.form.auditPath;
        });
      } else {
        fetchDetailByProcessId(params.processId).then((res) => {
          this.form = res.data.data;
          this.auditView = this.form.auditPath;
        });
      }
      listProcessTasks(params.processId).then((res) => {
        this.auditProcessList = res.data.data;
        this.dialog = true;
      });
    },

    handleDataLoaded(isLoaded) {
      if (isLoaded) {
        this.loading = false;
      } else {
        this.loading = false;
        this.handleException = true;
      }
    },

    // 确认
    confirmDialog() {
      this.$emit('setValue', this.relateData)
      this.relateData = {}
      this.cancelDialog()
    },
    // 关闭
    cancelDialog() {
      this.dialog = false;
      setTimeout(() => {
        this.loading = false;
        this.handleException = false;
        this.form = {}
        this.$emit('closeDialog', false)
      }, 500)
    },
    completeTask() {
      this.$confirm("确定要审批通过吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        return completeTask(this.form).then(() => {
          this.loading = false;
          this.confirmDialog();
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
      });
    },
    rejectTask() {
      this.$confirm("确定要驳回审批吗?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.loading = true;
        return rejectTask(this.form).then(() => {
          this.loading = false;
          this.confirmDialog();
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
      });
    },

    showTaskAuditLogDialog(processId) {
      this.taskAuditLogDialog = true;
      this.processId = processId;
    },
    closeTaskAuditTaskLogDialog() {
      this.taskAuditLogDialog = false;
    },
  }
}
</script>
<style>
.centered-content {
  height: 15vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.centered-text {
  height: 5vh;
  color: #7e7878;
  text-align: center;
  font-size: 20px;
}
</style>
